<template>
    <div class="div" style="width: 200px;background-color: rgb(48 65 86);overflow: auto;">
      <el-row>
       <el-col :span="24">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="rgb(48 65 86)"
          text-color="#fff"
          active-text-color="#ffd04b">
          <router-link to="/studentHome">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">学生端主页</span>
            </el-menu-item>
          </router-link>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>班级管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/studentAllClassroom">
                <el-menu-item index="1-1">
                  <i class="el-icon-tickets"></i>查看所有班级
                </el-menu-item>
              </router-link>
              <router-link to="/studentSelectedClassroom">
                <el-menu-item index="1-2">
                  <i class="el-icon-document-checked"></i>查看已加入班级
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>课程管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/studentAllCourse">
                <el-menu-item index="2-1">
                  <i class="el-icon-tickets"></i>查看所有课程
                </el-menu-item>
              </router-link>
              <router-link to="/studentSelectedCourse">
                <el-menu-item index="2-2">
                  <i class="el-icon-document-checked"></i>查看已选课程
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-reading" />
              <span>作业管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/studentAllTask">
                <el-menu-item index="3-1">
                  <i class="el-icon-document-copy"></i>查看所有作业
                </el-menu-item>
              </router-link>
              <router-link to="/studentTaskAchievement">
                <el-menu-item index="3-2">
                  <i class="el-icon-tickets" />查看作业成绩
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      </el-row>
    </div>
</template>

<script>
export default {
  name: 'Left',
  data () {
    return {
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
  el-menu-item:hover {
    background-color: red;
  }
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
  a{
    text-decoration: none;
    color: white;
  }
</style>
<style scoped>
  .div{
    overflow: auto
  }

  .div::-webkit-scrollbar{
    display: none;
  }
</style>
